import React, { Component } from 'react'

export default class LayOut extends Component {
  constructor(props) {
    /**
     * 1任务
        * 通过super来将绑定在组件身上的props赋值给 this.props  
        * 定义state
        * 普通函数定义时可以绑定函数
     */
    console.log('LayOut-constructor')
    super(props)
  }
  componentWillMount () {
    /**
     * 1.表示组件即将挂载,用于初始化事件和生命周期
     * 2.任务
     *      react内部完成任务,我们不干预
     * 3,这个钩子函数在react未来版本中弃用
     * 4.数据是否能拿到 : yes   数据请求 修改数据
     * 5.真实dom是否拿到:
     */
    console.log('LayOut-componentWillMount')

  }

  render () {
    console.log('LayOut-render')
    /**
     * 任务 
     *    1.底层  React.createElement
     *    2.解析  this.props 和 this.state
     *    3.将jsx元素渲染为vdom对象模型,也就意味着生成了vdom
        * 注意点   这个钩子函数不能使用setState
        *    1.js是单线程
        *    2.render函数要解析state/props  又在用setState来改会死循环
     */

    return (
      <div>LayOut</div>
    )
  }
  componentDidMount () {
    /**
          *1.表示组件挂在结束 
          *2.任务
              * 数据可以拿到     数据请求      数据修改
              * 真实dom可以拿到   真实dom操作/第三方库实例化
              
     */
    console.log('LayOut-componentDidMount')

  }
}


